function showtipsFn(el) {
  const curStyle = window.getComputedStyle(el, ""); // 获取当前元素的style
  const textSpan = document.createElement("span"); // 创建一个容器来记录文字的width
  // 设置新容器的字体样式，确保与当前需要隐藏的样式相同
  textSpan.style.fontSize = curStyle.fontSize;
  textSpan.style.fontWeight = curStyle.fontWeight;
  textSpan.style.fontFamily = curStyle.fontFamily;
  // 将容器插入body，如果不插入，offsetWidth为0
  document.body.appendChild(textSpan);
  // 设置新容器的文字
  textSpan.innerHTML = el.innerText;
  // 如果字体元素大于当前元素，则需要隐藏
  if (textSpan.offsetWidth > el.offsetWidth - 16) {
    // 给当前元素设置超出隐藏
    const computedStyle = getComputedStyle.call(null, el);
    el.style.overflow = computedStyle.overflow || "hidden";
    el.style.textOverflow = computedStyle.textOverflow || "ellipsis";
    el.style.whiteSpace = computedStyle.whiteSpace || "nowrap";
    // 鼠标移入
    el.onmouseenter = function (e) {
      console.log(e);
      // 创建浮层元素并设置样式
      const vcTooltipDom = document.createElement("div");
      vcTooltipDom.style.cssText = `top:${e.pageY + 5}px; left:${e.pageX}px;`;
      // 设置id方便寻找
      vcTooltipDom.setAttribute("id", "vc-tooltip");
      // 将浮层插入到body中
      document.body.appendChild(vcTooltipDom);
      // 浮层中的文字
      document.getElementById("vc-tooltip").innerHTML = el.innerText;
    };
    // 鼠标移出
    el.onmouseleave = function () {
      // 找到浮层元素并移出
      const vcTooltipDom = document.getElementById("vc-tooltip");
      vcTooltipDom && document.body.removeChild(vcTooltipDom);
    };
  }
  // 记得移除刚刚创建的记录文字的容器
  document.body.removeChild(textSpan);
}
export default {
  //自定义指令: 下拉加载

  // el {element} 当前元素

  mounted: showtipsFn,
  updated: showtipsFn,
  // 指令与元素解绑时
  unmounted() {
    // 找到浮层元素并移除
    const vcTooltipDom = document.getElementById("vc-tooltip");
    vcTooltipDom && document.body.removeChild(vcTooltipDom);
  },
};
